<template>
	<!-- 账单信息 -->
	<view>
		<view class="status" :style="{height:`${statusHeight}px`}"></view>
		<view :style="{height:`${statusHeight}px`}" style="background-color: #F5F5F5;"></view>
		<view class="bg"></view>
		<view class="navTitleShell">
			<view class="navImg">
				<image class="headImg" :src="userData.headPortrait"></image>
			</view>
			<view class="eventShell">
				<!-- <view class="eventBigText">{{info.eventName}}</view> -->
				<view class="eventSmallText">商户手册 > </view>
			</view>
			<view class="allPriceShell">
				<view class="priceText">未结算金额</view>
				<view class="allPrice">￥{{balance}}</view>
			</view>

			<view class="navTitle">
				<view class="navTitleTextShell" @click="switchHandle(1)">
					<view class="navTitleText" :class="current==1?'active':''">日报</view>
					<view class="redLine" v-if="current==1"></view>
				</view>
				<view class="navTitleTextShell" @click="switchHandle(2)">
					<view class="navTitleText" :class="current==2?'active':''">月报</view>
					<view class="redLine" v-if="current==2"></view>
				</view>
				<view class="navTitleTextShell" @click="switchHandle(3)">
					<view class="navTitleText" :class="current==3?'active':''">已结算</view>
					<view class="redLine" v-if="current==3"></view>
				</view>
			</view>
		</view>
		<view style="height: 460rpx"></view>
		<view class="bottomShell">
			<block v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="time">{{item.create_time}}</view>
					<view class="titleShell">
						<view class="priceShell" v-if="current != 3">{{item.orderQuantity}}笔订单</view>
						<view class="priceShell" v-else>结算金额：{{item.payAmount}}</view>
						<view class="priceText1" v-if="current != 3">总金额：{{item.payAmount}}元</view>
						<view class="priceText1" v-else>剩余金额：{{item.surplusAmount}}元</view>
					</view>
					<view class="dayPrice" v-if="current != 3">本{{current == 1 ? '日' : '月'}}实收{{item.turnover}}元</view>
				</view>
			</block>
		</view>
		<TabBar current="4" />
	</view>
</template>

<script>
	import TabBar from "@/components/tabBar.vue"
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				statusHeight: 0, //状态栏
				current: 1, //标题活跃值
				info: {
					eventName: "场地名",
					allPrice: 70270.54
				},
				list: [],
				userInfo: {},
				pageSize: 10,
				pageNumber: 1,
				customerId: '',
				userData: {
					headPortrait: '',
					balance: 0
				},
				balance: 0,
				isMore: false
			}
		},
		onReady() {
			this.statusHeight = getApp().globalData.statusBarHeight
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData')
			console.log(this.userData)
			this.getData()
            this.getBalance()
		},
		onReachBottom() {
			// console.log(this.isMore)
			if (!this.isMore) {
				this.pageNumber += 1
				this.getData()
			}
		},
		methods: {
			// 获取为未结算余额
			getBalance() {
				this.http({
					url: '/Main/getBalance',
					data: {
						open_id: uni.getStorageSync('openid') || '',

					},
					method: 'POST',
					success: res => {
						this.balance = res.data.balance
					}
				})
			},
			switchHandle(type) {
				this.list = []
				this.current = type
				this.getData()
			},
			getData() {
				if (this.current == 3) {
					this.http({
						url: '/Main/paymentRecord',
						data: {
							pageSize: this.pageSize,
							pageNumber: this.pageNumber,
							// userType: 2,
							merchantId: this.userData.merchant.customerId || '', //商户Id
							agentId: this.userData.agent.customerId || '', // 代理商id
						},
						method: 'POST',
						success: res => {
							if (res.code == 200) {
								if (res.data.list.length < this.pageSize) {
									this.isMore = true
								} else {
									this.isMore = false
								}
								this.list = this.list.concat(res.data.list)
							}
						}
					})
				} else {
					this.http({
						url: '/Main/settlementRecord',
						data: {
							pageSize: this.pageSize,
							pageNumber: this.pageNumber,
							// userType: 2,
							merchantId: this.userData.merchant.customerId || '', //商户Id
							agentId: this.userData.agent.customerId || '', // 代理商id
							timeType: this.current
						},
						method: 'POST',
						success: res => {
							if (res.code == 200) {
								if (res.data.list.length < this.pageSize) {
									this.isMore = true
								}
								this.list = this.list.concat(res.data.list)
							}
						}
					})
				}

			}
		}
	}
</script>

<style scoped>
	.status {
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F5F5F5;
		z-index: -1;
	}

	.navTitleShell {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
	}

	.navImg {
		width: 100%;
		padding: 30rpx 0;
	}

	.headImg {
		width: 56rpx;
		height: 56rpx;
		display: block;
		border-radius: 50%;
	}

	.navTitle {
		width: 70%;
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;
	}

	.navTitleTextShell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.navTitleText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.45);
	}

	.redLine {
		width: 100%;
		height: 8rpx;
		background-color: #E32929;
	}

	.active {
		font-size: 34rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.eventShell {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.eventBigText {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
	}

	.eventSmallText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		margin-top: 20rpx;
	}

	.allPriceShell {
		margin-top: 30rpx;
	}

	.priceText {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.allPrice {
		width: 100%;
		text-align: center;
		font-size: 76rpx;
		font-family: DIN;
		font-weight: bold;
		color: #000000;
	}

	.bottomShell {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-bottom: 200rpx;
	}

	.item {
		width: 100%;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 32rpx 20rpx;
		margin-top: 15rpx;
	}

	.time {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.titleShell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.priceShell {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		margin-top: 30rpx;
	}

	.priceText1,
	.dayPrice {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.dayPrice {
		margin-top: 24rpx;
	}
</style>
